<template>
	<view class="content">
		<!-- 消息 -->
		<view v-for="(item,index) in messageList" :class="item.userId == currentUserId? 'me':'other' ">
			<image class="user-head" :src="item.userId == currentUserId? currentUserVO.head:toUserVO.head"></image>
			<view style="max-width: 70%; background-color: white; border-radius: 10px; padding: 10px; margin: 5px;">
				{{item.content}}
			</view>
			<view style="position: absolute; bottom: 0px; color: #cdcdcd;font-size: 10px;"
				:style="item.userId == currentUserId?'right:38px':'left:38px'">{{item.createTime}}</view>
		</view>


		<!-- 底部消息发送栏 -->
		<view class="bottom-message-box">
			<view class="bottom-input">
				<uni-easyinput maxlength="400" v-model="messageContent" :input-border="false"
					placeholder="想说点什么..."></uni-easyinput>
			</view>
			<view class="bottom-btn" @click="publishMessage">发送</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfoById
	} from "@/api/user.js"

	import {
		saveMessage,
		getMessageByDialogueId
	} from "@/api/message.js"

	import {
		getDialogueIdByUserIds
	} from "@/api/dialogue.js"
	
	export default {
		data() {
			return {
				messageContent: "",
				currentUserId: 0,
				toUserId: 0,
				dialogueId: 0,
				messageList: [],
				currentUserVO: {},
				toUserVO: {},
				ws: null
			}
		},
		methods: {
			publishMessage() {
				// 向服务器发送消息
				this.ws.send(this.messageContent);

			}
		},
		onLoad: function(option) {
			this.currentUserId = option.currentUserId;
			this.toUserId = option.toUserId;
			this.dialogueId = option.dialogueId;

			if (this.dialogueId == null) {
				getDialogueIdByUserIds(this.currentUserId, this.toUserId).then(res => {
					getUserInfoById(this.currentUserId).then(res => {
						this.currentUserVO = res.data;
					});
					getUserInfoById(this.toUserId).then(res => {
						this.toUserVO = res.data;
					});
					getMessageByDialogueId(res.data).then(res => {
						this.messageList = res.data;
					});
					
					// WebSocket构造函数，创建WebSocket对象
					this.ws = new WebSocket('ws://localhost:7777/ws/' + res.data + "/" + this.currentUserId);
					this.ws.onopen = () => {
						console.log('客户端连接成功');
					}
					
					// 从服务器接受到信息时的回调函数
					this.ws.onmessage = (e) => {
						console.log('收到服务器响应', e.data);
						const msg = eval('(' + e.data + ')')
						// 请求后端将消息保存到redis中
						saveMessage(msg).then(res => {
							// 让页面滚动到最底部
							uni.pageScrollTo({
								scrollTop: 9999999999999999999999999999999999999999999999999999999999999999999999,
								duration: 300
							});
							// 清空输入框内容
							this.messageContent = "";
						});
						// 判断是否是本房间的消息
						if (msg.dialogueId == res.data) {
							this.messageList.push(msg);
						}
					};
				})
			} else {
				getUserInfoById(this.currentUserId).then(res => {
					this.currentUserVO = res.data;
				});
				getUserInfoById(this.toUserId).then(res => {
					this.toUserVO = res.data;
				});
				getMessageByDialogueId(this.dialogueId).then(res => {
					this.messageList = res.data;
				});
					
				// WebSocket构造函数，创建WebSocket对象
				this.ws = new WebSocket('ws://localhost:7777/ws/' + this.dialogueId + "/" + this.currentUserId);
				this.ws.onopen = () => {
					console.log('客户端连接成功');
				}
				
				// 从服务器接受到信息时的回调函数
				this.ws.onmessage = (e) => {
					console.log('收到服务器响应', e.data);
					const msg = eval('(' + e.data + ')')
					// 请求后端将消息保存到redis中
					saveMessage(msg).then(res => {
						// 让页面滚动到最底部
						uni.pageScrollTo({
							scrollTop: 9999999999999999999999999999999999999999999999999999999999999999999999,
							duration: 300
						});
						// 清空输入框内容
						this.messageContent = "";
					});
					// 判断是否是本房间的消息
					if (msg.dialogueId == this.dialogueId ) {
						this.messageList.push(msg);
					}
				};
				
				
			}


		},
		onBackPress() {
			this.ws.close();
		},
		onUnload() {
			this.ws.close();
		}
	}
</script>

<style>
	.content {
		padding-bottom: 50px;
	}


	.bottom-message-box {
		position: fixed;
		width: 100%;
		bottom: 0px;
		padding-bottom: 10px;
		display: flex;
	}

	.bottom-input {
		border-radius: 10px;
		overflow: hidden;
		width: 80%;
		margin-left: 2%;
	}

	.bottom-btn {
		width: 15%;
		height: 35px;
		background-color: #ffd524;
		margin-left: 1%;
		text-align: center;
		border-radius: 10px;
		line-height: 35px;
	}

	.me,
	.other {
		display: flex;
		margin: 0 15px;
		padding-bottom: 20px;
		position: relative;
	}

	.me {
		flex-direction: row-reverse;
	}

	.user-head {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-top: 5px;
	}
</style>